<template>
  <el-tabs
    tab-position="left"
    style="height: 100%"
    v-model="activeTab"
    class="recordSummary"
  >
    <el-tab-pane label="按部门汇总" name="1"></el-tab-pane>
    <el-tab-pane label="按岗位汇总" name="3"></el-tab-pane>
    <div class="recordSummary-list" v-loading="loading">
      <template v-if="list.length">
        <el-card class="recordSummary-item" v-for="(item, i) in list" :key="i">
          <div class="recordSummary-item-main">
            <div class="cap">{{ item.fullName }}意见</div>
            <div class="content">
              <div class="child-item" v-for="(child, j) in item.list" :key="j">
                <span style="color: #909399; font-size: 12px"
                  >{{ "第" + (item.list.length - j) + "条" }}&emsp;{{
                    child.handleTime | toDate()
                  }}</span
                >
                <template v-if="child.handleStatus == 0">
                  <div class="child-item-title">
                    <el-link :underline="false" type="danger">
                      {{ item.fullName }} {{ child.userName }} 于
                      {{ child.handleTime | toDate() }}
                    </el-link>
                    <div class="status">
                      <el-link :underline="false" type="danger"
                        >审核拒绝</el-link
                      >
                    </div>
                  </div>
                  <div class="child-item-option">
                    <el-link :underline="false" type="danger">
                      审批意见：{{ child.handleOpinion }}
                    </el-link>
                  </div>
                </template>
                <template v-if="child.handleStatus == 1">
                  <div class="child-item-title">
                    <el-link :underline="false" type="success"
                      >{{ item.fullName }} {{ child.userName }} 于
                      {{ child.handleTime | toDate() }}
                    </el-link>
                    <div class="status">
                      <el-link :underline="false" type="success"
                        >审核通过</el-link
                      >
                    </div>
                  </div>
                  <div class="child-item-option">
                    <el-link :underline="false" type="success">
                      审批意见：{{ child.handleOpinion }}
                    </el-link>
                  </div>
                </template>
                <template v-if="child.handleStatus == 2">
                  <div class="child-item-title">
                    <el-link :underline="false" type="primary">
                      {{ item.fullName }} {{ child.userName }} 于
                      {{ child.handleTime | toDate() }}
                    </el-link>
                    <div class="status">
                      <el-link :underline="false" type="primary">发起</el-link>
                    </div>
                  </div>
                </template>
                <template v-if="child.handleStatus == 3">
                  <div class="child-item-title">
                    <el-link :underline="false" type="info">
                      {{ item.fullName }} {{ child.userName }} 于
                      {{ child.handleTime | toDate() }}
                    </el-link>
                    <div class="status">
                      <el-link :underline="false" type="info">撤回</el-link>
                    </div>
                  </div>
                  <div class="child-item-option">
                    <el-link :underline="false" type="info">
                      撤回原因：{{ child.handleOpinion }}
                    </el-link>
                  </div>
                </template>
                <template v-if="child.handleStatus == 4">
                  <div class="child-item-title">
                    <el-link :underline="false" type="danger">
                      {{ item.fullName }} {{ child.userName }} 于
                      {{ child.handleTime | toDate() }}
                    </el-link>
                    <div class="status">
                      <el-link :underline="false" type="danger"
                        >流程终止</el-link
                      >
                    </div>
                  </div>
                  <div class="child-item-option">
                    <el-link :underline="false" type="danger"
                      >终止原因：{{ child.handleOpinion }}</el-link
                    >
                  </div>
                </template>
                <template v-if="child.handleStatus == 5">
                  <div class="child-item-title">
                    <el-link :underline="false" type="primary">
                      {{ item.fullName }} {{ child.userName }} 于
                      {{ child.handleTime | toDate() }}
                    </el-link>
                    <div class="status">
                      <el-link :underline="false" type="primary">指派</el-link>
                    </div>
                  </div>
                  <div class="child-item-option">
                    <el-link :underline="false" type="primary">
                      指派人员：{{ child.operatorId }}
                    </el-link>
                  </div>
                </template>
                <template v-if="child.handleStatus == 6">
                  <div class="child-item-title">
                    <el-link :underline="false" type="primary">
                      {{ item.fullName }} {{ child.userName }} 于
                      {{ child.handleTime | toDate() }}
                    </el-link>
                    <div class="status">
                      <el-link :underline="false" type="primary">加签</el-link>
                    </div>
                  </div>
                  <div class="child-item-option">
                    <el-link :underline="false" type="primary">
                      加签人员：{{ child.operatorId }}
                    </el-link>
                  </div>
                </template>
                <template v-if="child.handleStatus == 7">
                  <div class="child-item-title">
                    <el-link :underline="false" type="primary">
                      {{ item.fullName }} {{ child.userName }} 于
                      {{ child.handleTime | toDate() }}
                    </el-link>
                    <div class="status">
                      <el-link :underline="false" type="primary">转审</el-link>
                    </div>
                  </div>
                  <div class="child-item-option">
                    <el-link :underline="false" type="primary">
                      转审人员：{{ child.operatorId }}
                    </el-link>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </el-card>
      </template>
      <el-empty description="暂无数据" :image-size="120" v-else></el-empty>
    </div>
  </el-tabs>
</template>

<script>
import { getRecordList } from "@/api/workFlow/FlowBefore";
export default {
  name: "comments",
  props: {
    id: { type: String, default: "" },
    summaryType: { default: "0" },
  },
  data() {
    return {
      list: [],
      activeTab: "1",
      loading: false,
    };
  },
  watch: {
    activeTab(val) {
      this.init();
    },
  },
  methods: {
    init() {
      this.loading = true;
      const query = {
        category: this.activeTab,
        type: this.summaryType,
      };
      getRecordList(this.id, query)
        .then((res) => {
          this.list = res.data;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.recordSummary {
  .el-tab-pane {
    height: 0;
  }

  >>> .el-tabs__content {
    height: 100%;

    .recordSummary-list {
      height: 100%;
      overflow: hidden auto;
      padding: 50px 100px 0;

      .recordSummary-item {
        margin-bottom: 20px;

        .el-card__body {
          padding: 0;

          .recordSummary-item-main {
            display: flex;
            align-items: center;

            .cap {
              width: 150px;
              flex-shrink: 0;
              text-align: center;
              font-size: 14px;
            }

            .content {
              flex: 1;
              padding: 30px 50px;
              border-left: 1px solid #e4e7ed;
            }

            .child-item {
              // padding-bottom: 30px;
              padding-top: 12px;
              padding-bottom: 12px;
              border-bottom: 1px dashed #d1d2d3;
              font-size: 14px;
              line-height: 30px;

              &:last-child {
                margin-bottom: 0;
              }

              .child-item-title {
                margin-bottom: 2px;
                display: flex;
                justify-content: space-between;

                .status {
                  flex-shrink: 0;

                  .el-link {
                    cursor: auto !important;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
